import { ref } from 'vue'

import { defineStore } from 'pinia'

import { getSidebarStatus, setSidebarStatus } from '@/utils/auth'

import Cookies from 'js-cookie'

const sidebarStatus = getSidebarStatus()

export const useAppStore = defineStore('app', () => {
  const device = ref('desktop')
  const size = ref(Cookies.get('size') || 'medium')

  const sidebar = ref({
    opened: sidebarStatus ? !!sidebarStatus : sidebarStatus === null,
    withoutAnimation: false,
  })

  const toggleSideBar = () => {
    sidebar.value.opened = !sidebar.value.opened
    sidebar.value.withoutAnimation = false
    if (sidebar.value.opened) {
      setSidebarStatus('1')
    } else {
      setSidebarStatus('')
    }
  }

  const closeSideBar = (withoutAnimation: boolean) => {
    sidebar.value.opened = false
    sidebar.value.withoutAnimation = withoutAnimation
    setSidebarStatus('')
  }

  const toggleDevice = (device: string) => {
    device.value = device
  }

  const setSize = (size: string) => {
    size.value = size
    Cookies.set('size', size)
  }

  return {
    device,
    size,
    sidebar,
    toggleSideBar,
    closeSideBar,
    toggleDevice,
    setSize,
  }
})
